import { Chart } from '@antv/g2';
import { useEffect } from 'react';
export default ({ container }: any) => {
  useEffect(() => {
    const data = [
      { item: '暴力行为', score: 70 },
      { item: '逃脱风险', score: 20 },
      { item: '健康风险', score: 30 },
      { item: '心理健康风险', score: 40 },
      { item: '被伤害风险', score: 40 },
    ];

    const chart = new Chart({
      container,
      autoFit: true,
    });

    chart.coordinate({ type: 'polar' });

    chart
      .data(data)
      .scale('x', { padding: 0.5, align: 0 })
      .scale('y', { tickCount: 5, domainMax: 80 })
      .axis('x', {
        grid: true,
        gridStrokeWidth: 1,
        tick: false,
        gridLineDash: [0, 0],
      })
      .axis('y', {
        zIndex: 1,
        title: false,
        gridConnect: 'line',
        gridStrokeWidth: 1,
        gridLineDash: [0, 0],
      });

    chart
      .area()
      .encode('x', 'item')
      .encode('y', 'score')
      .encode('color', 'type')
      .style('fillOpacity', 0.5);

    chart
      .line()
      .encode('x', 'item')
      .encode('y', 'score')
      .encode('color', 'type')
      .style('lineWidth', 2);

    chart
      .point()
      .encode('x', 'item')
      .encode('y', 'score')
      .encode('color', 'type')
      .encode('shape', 'point')
      .encode('size', 3)
      .tooltip(null);

    // chart.interaction('tooltip', { crosshairsLineDash: [4, 4] });

    chart.render();
  }, []);

  return <div id={container} style={{ marginTop: '-80px' }}></div>;
};
